<template>
  <div class="panel-1 flex flex-direction">
    <div class="title">{{ title }}
      <div style="font-size:0.7292vw;color: rgba(0,0,0,0.65);">
        <span style="color: rgba(24, 144, 255, 1);">左侧</span>
        <span style="margin-left: 1.25vw;">右侧</span>
      </div>
    </div>
    <div class="flex-sub" style="margin-top: 0.8333vw;position: relative;">
      <video1
        ref="video1"
        :rtsp-url="rtspUrl"
        :index="index"
        style="border-radius: 6px;width: 100%;height: 100%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;"
      />
    </div>
    <!-- <div class="flex-sub" style="margin-top: 0.8333vw;background-color: black;border-radius: 6px;">

    </div> -->
  </div>
</template>

<script>
import video1 from '@/components/VideoMonitor/video1.vue'
export default {
  components: {
    video1
  },
  props: {
    title: {
      type: String,
      default: '隧道入口视频'
    },
    rtspUrl: {
      type: String,
      default: ''
    },
    index: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  mounted() {
    this.$refs.video1.init('rtsp://admin:cq753951@192.168.0.245/Streaming/Channels/1')
  }
}
</script>

<style lang="scss" scoped>
@import url('./style.scss');
</style>
